  <template>
	<view class="zai-box">
        <scroll-view scroll-y class="page">
			
            <view class="text-center" :style="[{animation: 'show ' + 0.4+ 's 1'}]">
				<!-- <image src="/static/case82.png" mode='aspectFit' class="zai-logo "></image> -->
				
				<block v-if="operId==1">
				<view class="zai-title text-shadow ">重置密码 </view></block>
				<block v-else>
					<view class="zai-title text-shadow " >注册 </view>
				</block>
			</view>
            <view class="box padding-lr-xl login-paddingtop" :style="[{animation: 'show ' + 0.6+ 's 1'}]">
				
                <block>
					<form>
                	<view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
                		<!-- <view class="title"><text class="cuIcon-mobile margin-right-xs"></text>手机号:</view> -->
                		<input placeholder="请输入手机号" type="number" maxlength="11" v-model="phoneNo"></input>
                	</view>
                	<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
                		<!-- <view class="title"><text class="cuIcon-lock margin-right-xs"></text>验证码:</view> -->
                		<input class="uni-input" placeholder="请输入验证码" v-model="smsCode"/>
                		<view class="action">
                			<button class="cu-btn line-blue sm" :disabled="!isSendSMSEnable" @click="onSMSSend"> {{ getSendBtnText }}</button>
                		</view>
                	</view>
					<view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
						<!-- <view class="title"><text class="cuIcon-mobile margin-right-xs"></text>密码:</view> -->
						<input placeholder="请至少输入 8 个字符的密码" type="number" maxlength="11" v-model="password"></input>
					</view>
					<view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
						<!-- <view class="title"><text class="cuIcon-mobile margin-right-xs"></text>确认密码:</view> -->
						<input placeholder="请输入确认密码" type="number" maxlength="11" v-model="rePassword"></input>
					</view>
					<block v-if="operId!=1">
					<view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
						<!-- <view class="title"><text class="cuIcon-mobile margin-right-xs"></text>确认密码:</view> -->
						<input placeholder="请输入邀请码(选填)" type="number" maxlength="11" v-model="inviteCode"></input>
					</view>
					</block>
                	<view class="padding text-center margin-top">
						<block v-if="operId==1">
						<button class="cu-btn bg-blue lg margin-right shadow" :loading="loading" :class="[shape=='round'?'round':'']"
							@tap="onSMSLogin" ><text space="emsp">{{loading ? "重置中...":" 重置密码 "}}</text>
						</button></block>
						<block v-else>
                		<button class="cu-btn bg-blue lg margin-right shadow" :loading="loading" :class="[shape=='round'?'round':'']"
                			@click="onSMSRegister"><text space="emsp">{{loading ? "注册中...":" 注册 "}}</text>
                		</button></block>
                		<button class="cu-btn line-blue lg margin-left shadow" :loading="loading" :class="[shape=='round'?'round':'']"
                			@click="navLoginPage()">去登录
                		</button>
                	</view>
					</form>
                </block>
				
	
				<!-- #ifdef APP-PLUS -->
				<view class="padding flex flex-direction  text-center">
					当前版本:{{version}}
				</view>
				<!-- #endif -->
				
            </view>
        </scroll-view>
		<!-- 登录加载弹窗 -->
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="/static/case82.png" mode="aspectFit" class="round"></image>
			
			<view class="gray-text">操作中...</view>
		
		
		</view>
    </view>

</template>
<script>

    import apiService from '@/api/api.js';
	
    export default {
        data() {
            return {
				shape:'',// round 圆形
			    loading: false,
				password: '',
				phoneNo: '',
				smsCode: '',
				rePassword:'',
				inviteCode:null, // 邀请码
				showPassword: false, //是否显示明文
				
				smsCountDown: 0,
				smsCountInterval: null,
				toggleDelay: false,
				version:'',
				//第三方登录相关信息
				thirdType:"",
				thirdLoginInfo:"",
				thirdLoginState:false,
				bindingPhoneModal:false,
				thirdUserUuid:'',
				operId:'',
				
            };
        },
		onLoad:function(option){
			
			this.operId = option.operId;
			this.inviteCode = option.inviteCode;
			    console.log(this.operId);
			// #ifdef APP-PLUS
			var that=this
			plus.runtime.getProperty( plus.runtime.appid, function ( wgtinfo ) {
				that.version=wgtinfo.version
			});
			// #endif
		},
		computed: {
		      isSendSMSEnable() {
		        return this.smsCountDown <= 0 && this.phoneNo.length > 4;
		      },
		      getSendBtnText() {
		        if (this.smsCountDown > 0) {
		          return this.smsCountDown + '秒后发送';
		        } else {
		          return '发送验证码';
		        }
		      },
		    
		},
        methods: {
		
		
			onSMSSend() {
				let smsParams = {};
				smsParams.mobile=this.phoneNo;
				smsParams.smsmode="1";
				let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
                if(!smsParams.mobile || smsParams.mobile.length==0){
					this.$tip.toast('请输入手机号');
					return false
				}
				if(!checkPhone.test(smsParams.mobile)){
					this.$tip.toast('请输入正确的手机号');
					return false
				}
				this.$http.post("/sys/sms",smsParams).then(res=>{
				  if(res.data.success){
					this.smsCountDown = 60;
					this.startSMSTimer();
				  }else{
					this.smsCountDown = 0;
					this.$tip.toast(res.data.message);
				  }
				});
			  },
			startSMSTimer() {
				this.smsCountInterval = setInterval(() => {
				  this.smsCountDown--;
				  if (this.smsCountDown <= 0) {
					clearInterval(this.smsCountInterval);
				  }
				}, 1000);
			},
			onSMSRegister() {
				let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
				
				if(!this.phoneNo || this.phoneNo.length==0){
				  this.$tip.toast('请填写手机号');
				  return;
				}
				if(!this.password || this.password.length<8){
				  this.$tip.toast('密码小于8位');
				  return;
				}
				if(this.password !=this.rePassword){
				  this.$tip.toast('两次输入密码不一致');
				  return;
				}
				if(!checkPhone.test(this.phoneNo)){
					this.$tip.toast('请输入正确的手机号');
					return false
				}
				if(!this.smsCode || this.smsCode.length==0){
				  this.$tip.toast('请填短信验证码');
				  return;
				}
				let reParams = {
				  phone:this.phoneNo,
				  smscode:this.smsCode,
				  password:this.password,
				  inviteCode:this.inviteCode
				};
				apiService.mRegister(reParams).then((res) => {
				  console.log("res====》",res)
				  if(res.data.success){
					this.$tip.success('注册成功!')
					this.$Router.replaceAll({name:'login'})
				  }else{
					this.$tip.error(res.data.message);
				  }
				}).catch((err) => {
				  let msg = ((err.response || {}).data || {}).message || err.data.message || "请求出现错误，请稍后再试"
				  this.$tip.error(msg);
				});
			},	onPasswordChange() {
				let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
				
				if(!this.phoneNo || this.phoneNo.length==0){
				  this.$tip.toast('请填写手机号');
				  return;
				}
				if(!this.password || this.password.length<8){
				  this.$tip.toast('密码小于8位');
				  return;
				}
				if(this.password !=this.rePassword){
				  this.$tip.toast('两次输入密码不一致');
				  return;
				}
				if(!checkPhone.test(this.phoneNo)){
					this.$tip.toast('请输入正确的手机号');
					return false
				}
				if(!this.smsCode || this.smsCode.length==0){
				  this.$tip.toast('请填短信验证码');
				  return;
				}
				let reParams = {
				  phone:this.phoneNo,
				  smscode:this.smsCode,
				  password:this.password
				};
				apiService.mPasswordChang(reParams).then((res) => {
				  console.log("res====》",res)
				  if(res.data.success){
					this.$tip.success('重置密码成功!')
					this.$Router.replaceAll({name:'login'})
				  }else{
					this.$tip.error(res.data.message);
				  }
				}).catch((err) => {
				  let msg = ((err.response || {}).data || {}).message || err.data.message || "请求出现错误，请稍后再试"
				  this.$tip.error(msg);
				});
			},
			// /sys/user/passwordChang
			navLoginPage(){
			uni.navigateTo({
				url:'/pages/login/login'
			});

		}
        },
		beforeDestroy() {
		    if (this.smsCountInterval) {
		        clearInterval(this.smsCountInterval);
		    }
		},
    }
</script>
<style>
	.login-paddingtop {
	    padding-top: 100upx;
	}
	
	.zai-box {
	    padding: 0 20upx;
	    padding-top: 100upx;
	    position: relative;
	}
	
	.zai-logo {
	    width: 200upx;
	    height: 150px;
	}
	
	.zai-title {
	   font-size: 58upx;
	   color: #000000;
	   text-align: center;
	}
	
	.input-placeholder, .zai-input {
	    color: #94afce;
	}
	
	.zai-label {
	    padding: 60upx 0;
	    text-align: center;
	    font-size: 30upx;
	    color: #a7b6d0;
	}
	
	.zai-btn {
	    background: #ff65a3;
	    color: #fff;
	    border: 0;
	    border-radius: 100upx;
	    font-size: 36upx;
	}
	
	.zai-btn:after {
	    border: 0;
	}
	
	/*按钮点击效果*/
	.zai-btn.button-hover {
	    transform: translate(1upx, 1upx);
	}
	
</style>
